<script setup>
import { onMounted, ref } from "vue";
import { getJWTFun } from "@/hook/jsrsasign";
import {
  LiveOrderApi,
  payLiveOrderApi,
  hotelTransactionApi,
  createShopHotelRecordApi,
} from "@/server/api/profile";
import { useRoute, useRouter } from "vue-router";
import { useUseStore } from "@/stores/user";
import { ToastFun } from "@/hook/toast";
import { getInfoAPI } from "@/server/api/userInfo";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
let ImgScr = useUseStore().ing;
const route = useRoute();

const bath = ref(""); //洗浴设施
const appliance = ref(""); //电器设施
const basics = ref(""); //基础设施
const router = useRouter();
const showCenter = ref(false); //中间弹出层

const user = useUseStore();
const roomDetile = ref(null); //酒店详细信息
roomDetile.value = route.query; //酒店详细信息
const userInfome = ref({});

//所有的基础设施
const basicList = ref([
  {
    name: "24小时前台",
    img: "/images/Hotelpictures/24小时前台.svg",
    status: 0,
    flag: true,
  },
  {
    name: "安保人员",
    img: "/images/Hotelpictures/安保人员.svg",
    status: 0,
    flag: true,
  },
  {
    name: "安全报警器",
    img: "/images/Hotelpictures/安全报警器.svg",
    status: 0,
    flag: true,
  },
  {
    name: "餐厅",
    img: "/images/Hotelpictures/餐厅.svg",
    status: 0,
    flag: true,
  },
  {
    name: "电梯",
    img: "/images/Hotelpictures/电梯.svg",
    status: 0,
    flag: true,
  },
  {
    name: "多功能厅",
    img: "/images/Hotelpictures/多功能厅.svg",
    status: 0,
    flag: true,
  },
  {
    name: "会议厅",
    img: "/images/Hotelpictures/会议厅.svg",
    status: 0,
    flag: true,
  },
  {
    name: "叫车服务",
    img: "/images/Hotelpictures/叫车服务.svg",
    status: 0,
    flag: true,
  },
  {
    name: "禁烟",
    img: "/images/Hotelpictures/禁烟.svg",
    status: 0,
    flag: true,
  },
  {
    name: "快递服务",
    img: "/images/Hotelpictures/快递服务.svg",
    status: 0,
    flag: true,
  },
  {
    name: "礼宾服务",
    img: "/images/Hotelpictures/礼宾服务.svg",
    status: 0,
    flag: true,
  },
  {
    name: "灭火器",
    img: "/images/Hotelpictures/灭火器.svg",
    status: 0,
    flag: true,
  },
  {
    name: "热水",
    img: "/images/Hotelpictures/外送洗衣服务.svg",
    status: 0,
    flag: true,
  },
  {
    name: "叫醒服务",
    img: "/images/Hotelpictures/闹钟.svg",
    status: 0,
    flag: true,
  },
  {
    name: "送餐服务",
    img: "/images/Hotelpictures/送餐服务.svg",
    status: 0,
    flag: true,
  },
  {
    name: "火灾报警器",
    img: "/images/Hotelpictures/图标-地图-火灾报警器.svg",
    status: 0,
    flag: true,
  },
  {
    name: "外送洗衣服务",
    img: "/images/Hotelpictures/外送洗衣服务.svg",
    status: 0,
    flag: true,
  },
  {
    name: "无烟楼层",
    img: "/images/Hotelpictures/无烟楼层.svg",
    status: 0,
    flag: true,
  },
  {
    name: "洗衣服务",
    img: "/images/Hotelpictures/洗衣服务.svg",
    status: 0,
    flag: true,
  },
  {
    name: "行李寄存",
    img: "/images/Hotelpictures/行李寄存.svg",
    status: 0,
    flag: true,
  },
  {
    name: "烟雾报警器",
    img: "/images/Hotelpictures/烟雾报警器.svg",
    status: 0,
    flag: true,
  },
  {
    name: "专职行李员",
    img: "/images/Hotelpictures/专职行李员.svg",
    status: 0,
    flag: true,
  },
  {
    name: "公共停车场",
    img: "/images/Hotelpictures/dt-公共停车场.svg",
    status: 0,
    flag: true,
  },
  {
    name: "公共音响",
    img: "/images/Hotelpictures/icon_公共音响系统.svg",
    status: 0,
    flag: true,
  },
  {
    name: "摄像头",
    img: "/images/Hotelpictures/kakoutongji.svg",
    status: 0,
    flag: true,
  },
  {
    name: "wifi",
    img: "/images/Hotelpictures/wifi.svg",
    status: 0,
    flag: true,
  },
]);

const havebasics = ref([]); // 有的酒店设施

havebasics.value = JSON.parse(roomDetile.value.basics);

const filteredList = ref([]); //

//  赛选基础设施的函数
const selecBasic = () => {
  basicList.value.forEach((basicItem) => {
    havebasics.value.forEach((openItem) => {
      if (basicItem.name === openItem.name) {
        filteredList.value.push({
          name: openItem.name,
          img: basicItem.img,
        });
      }
    });
  });
  console.log(filteredList.value);
};

const haveBath = ref([]);

haveBath.value = JSON.parse(roomDetile.value.bath);

const bathList = ref([]); //

//  赛选基础设施的函数
const selecBath = () => {
  basicList.value.forEach((bathItem) => {
    haveBath.value.forEach((openItem) => {
      if (bathItem.name === openItem.name) {
        bathList.value.push({
          name: openItem.name,
          img: bathItem.img,
        });
      }
    });
  });
};

const haveAppliance = ref([]);

haveAppliance.value = JSON.parse(roomDetile.value.appliance);

const applianceList = ref([]);

const selecAppliance = () => {
  basicList.value.forEach((basicItem) => {
    haveAppliance.value.forEach((openItem) => {
      if (basicItem.name === openItem.name) {
        applianceList.value.push({
          name: openItem.name,
          img: basicItem.img,
        });
      }
    });
  });
  console.log(filteredList.value);
};




// 获取页面Pl(钱)信息方法
const getInfo = async () => {
  const res = await getInfoAPI(user.userId); //获取自己积分的接口
  userInfome.value = res.data.data;
};

const messageinfo = ref({
  id: "",
  recordId: "",
  roomId: route.query.roomId,
  uid: user.userId,
  name: "",
  telephone: "",
  startTime: "",
  endTime: "",
  currentTime: "",
  delFlag: "",
  orderId: "",
});

const numberoom = ref(1);
//定义酒店的信息

const infoBottom = ref(false);
const dateTime = ref();
const show = ref(false);

const startTime = ref(null);
const endTimes = ref(null);
const orderId = ref(""); //生成未支付订单的id

const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
//时间选择函数
const onConfirm = (values) => {
  const [start, end] = values;
  const date = new Date(start);
  const year = date.getFullYear();
  const month = date.getMonth() + 1; // 月份是从 0 开始计数的，所以需要加 1
  const day = date.getDate();

  const dates = new Date(end);
  const years = dates.getFullYear();
  const months = dates.getMonth() + 1; // 月份是从 0 开始计数的，所以需要加 1
  const days = dates.getDate();

  startTime.value = year + "-" + month + "-" + day + " 0:0:0";
  endTimes.value = years + "-" + months + "-" + days + " 0:0:0";
  console.log(startTime.value + " 0:0:0", "开始时间");
  console.log(endTimes.value + " 0:0:0", "结束时间");

  show.value = false;
  dateTime.value = `${formatDate(start)} - ${formatDate(end)}`;
  messageinfo.value.startTime = formatDate(start);
  messageinfo.value.endTime = formatDate(end);
};

// bath.value = JSON.parse(route.query.bath);
// appliance.value = JSON.parse(route.query.appliance)[0];
// basics.value = JSON.parse(route.query.basics)[0];


const images = ref([]);
images.value = route.query.imageList;

const onSubmit = async () => {
  roomDetile.value.price = String(Number(route.query.price) * Number(numberoom.value));
  console.log(111, roomDetile.value.price);
  if (userInfome.value < roomDetile.value.price) {
    ToastFun("");
    return;
  }
  let token = getJWTFun({
    shopId: route.query.shopId,
    uid: user.userId,
    transactionAmount: roomDetile.value.price,
    commodityId: route.query.roomId,
    number: Number(numberoom.value),
  }); //酒店提交订单信息

  //判断时间，这样时间就一定要选
  if (messageinfo.value.startTime != "" && messageinfo.value.endTime != "") {
    showCenter.value = true;

    ToastFun("Loading");
    try {
      let res = await LiveOrderApi(token);
      ToastFun(t("me.order.hotelOrderSuccess"));
      orderId.value = res.data.data;
      console.log(res.data, "酒店未支付订单");
    }
    catch (error) {
      showCenter.value = false;
      ToastFun("show", { msg: t("me.order.LackofHotelRooms") });
    }
  }
};

// 确认支付按钮
const paymentFs = async () => {
  if (userInfome.value.pointBalance < roomDetile.value.price) {
    ToastFun("");
    return;
  }
  let token = getJWTFun({
    orderId: orderId.value,
    uid: user.userId,
    transactionAmount: route.query.price,
    commodityId: route.query.roomId,
    number: Number(numberoom.value),
  }); //酒店提交订单信息
  ToastFun(t("hotelPage.message"));
  const resone = await payLiveOrderApi(token);
  if (resone.data.code != 200) {
    ToastFun(t("me.order.HotelPaymentFailure"));
    return;
  }
  const data = {
    shopId: route.query.shopId,
    userId: user.userId,
    transactionAmount: route.query.price,
  }
  let Trading = getJWTFun(data);
  const restow = await hotelTransactionApi(Trading);
  if (restow.data.code != 200) {
    ToastFun(t("me.order.HotelPaymentFailure"));
    return;
  }
  let hotelOrder = {
    currentTime: null,
    delFlag: 0,
    endTime: endTimes.value,
    id: null,
    name: messageinfo.value.name,
    orderId: orderId.value,
    phone: route.query.phone,
    recordId: null,
    roomId: route.query.roomId,
    startTime: startTime.value,
    uid: user.userId,
  };
  const res = await createShopHotelRecordApi(hotelOrder);
  showCenter.value = false;
  if (res.data.code != 200) {
    ToastFun(t("me.order.HotelPaymentFailure"));
    return;
  }
  ToastFun(t("me.order.HotelPaymentSuccess"));
  console.log(res.data + "订单提交成功");
  router.push({
    path: "/storePayed",
    query: {
      id: orderId.value,
      price: roomDetile.value.price
    },
  });
  infoBottom.value = false;
};
onMounted(() => {
  getInfo();
  selecBasic();
  selecBath();
  selecAppliance();
});
</script>



<template>
  <div class="roomDetile">
    <!-- 图片轮播 -->
    <div class="slideshow">
      <div class="back">
        <van-icon name="arrow-left" size="30" @click="$router.back()" />
      </div>
      <van-swipe :autoplay="3000" lazy-render class="my-swipe">
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 酒店房间详情 -->
    <div class="roomDetails">
      <!-- 房间类型与基本信息 -->
      <div class="roomInfo">
        <p class="title">{{ roomDetile.bedType }}</p>

        <div class="topInfo">
          <div class="infoItem" v-if="roomDetile.land">
            <span>{{ roomDetile.land }}㎡</span>
            <p>面积</p>
          </div>
          <div class="infoItem" v-if="roomDetile.floor">
            <span>{{ roomDetile.floor }}层</span>
            <p>楼层</p>
          </div>

          <div class="infoItem" v-if="roomDetile.roomTypeName">
            <span>{{ roomDetile.roomTypeName }}</span>
            <p>房间名</p>
          </div>
        </div>
      </div>

      <!-- 房间设施 -->
      <div class="facility">
        <div class="facilityItem">
          <img src="\images\money.svg" alt="Price" />
          <p>{{ $t("pay.price") }}</p>
          <span>{{ roomDetile.price }} eCNY</span>
        </div>
        <div class="facilityItem">
          <img src="\images\nubp.svg" alt="Guests" />
          <p>可入住人数</p>
          <span>{{ roomDetile.adult }}人</span>
        </div>
        <div class="facilityItem">
          <img src="\images\bed.svg" alt="Bed" />
          <p>床</p>
          <span>{{ roomDetile.bed }}张床</span>
        </div>
      </div>

      <!-- 入住政策 -->
      <div class="policy">
        <h3>入住条件</h3>
        <p>{{ roomDetile.restricted }}</p>
      </div>

      <!-- 基础设施 -->
      <div class="basics">
        <h3>基础设施</h3>
        <div class="facilitiesList">
          <div class="item" v-for="(i, index) in filteredList" :key="index">
            <div class="imgContainer">
              <img :src="i.img" alt="Facility" />
            </div>
            <p>{{ i.name }}</p>
          </div>
        </div>
        <h3>洗浴设施</h3>
        <div class="facilitiesList">
          <div class="item" v-for="(i, index) in bathList" :key="index">
            <div class="imgContainer">
              <img :src="i.img" alt="Facility" />
            </div>
            <p>{{ i.name }}</p>
          </div>
        </div>
        <h3>电器设施</h3>
        <div class="facilitiesList">
          <div class="item" v-for="(i, index) in applianceList" :key="index">
            <div class="imgContainer">
              <img :src="i.img" alt="Facility" />
            </div>
            <p>{{ i.name }}</p>
          </div>
        </div>
      </div>

      <!-- 入住按钮 -->
      <div class="btn">
        <van-button @click="infoBottom = true">入住</van-button>
      </div>
    </div>

    <!-- 底部弹出入住信息 -->
    <van-popup v-model:show="infoBottom" position="bottom" :style="{ height: '60%' }">
      <div class="message">
        <div class="title">
          <h3>入住信息</h3>
        </div>
        <div class="time">
          <van-cell title="选择入住和离店时间" :value="dateTime" @click="show = true" />
          <van-icon name="arrow" />
          <van-calendar v-model:show="show" type="range" @confirm="onConfirm" />
        </div>

        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field v-model="messageinfo.name" name="姓名" label="姓名" placeholder="请输入你的名字"
              :rules="[{ required: true, message: '名字不能为空' }]" />
            <van-field v-model="messageinfo.telephone" name="电话" label="电话" placeholder="请输入你的电话号码"
              :rules="[{ required: true, message: '号码不能为空' }]" />
            <van-field v-model="numberoom" name="数量" label="房间数量" placeholder="请输入要订的房间数量"
              :rules="[{ required: true, message: '数量不能为空' }]" />
          </van-cell-group>
          <div style="margin: 16px" class="btn">
            <van-button round type="primary" native-type="submit" style="width: 150px" color="#601287">
              {{ $t("manageHShop.submmit") }}
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>

    <!-- 支付确认弹窗 -->
    <van-popup v-model:show="showCenter" round :style="{ padding: '30px' }">
      <div class="payment">
        <h3 style="text-align: center; font-size: 20px">{{ $t("order.payTitle") }}</h3>
        <div style="text-align: center; font-size: 16px; margin: 20px 0">
          {{ $t("order.pointPay") }}:{{ roomDetile.price }}
        </div>
        <div class="btn">
          <div @click="showCenter = false">{{ $t("exchange.cancel") }}</div>
          <div @click="paymentFs">{{ $t("exchange.confirm") }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<style lang="scss" scoped>
.slideshow {
  position: relative;
  margin-bottom: 20px;
}

.roomDetails {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  margin-top: 10px;
}

.roomInfo .title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.topInfo {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.infoItem {
  width: 45%;
  text-align: center;
}

.infoItem span {
  font-size: 18px;
  color: #601287;
  font-weight: bold;
}

.infoItem p {
  font-size: 14px;
  color: #777;
}

.facility {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.facilityItem {
  display: flex;
  align-items: center;
  width: 30%;
}

.facilityItem img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.facilityItem p {
  font-size: 16px;
  color: #333;
}

.facilitiesList {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.facilitiesList .item {
  width: 45%;
  text-align: center;
}

.facilitiesList .imgContainer img {
  width: 40px;
  height: 40px;
}

.btn {
  margin-top: 30px;
  text-align: center;
}

.btn van-button {
  background-color: #601287;
  color: white;
  padding: 12px;
  border-radius: 5px;
  font-size: 18px;
}

.message {
  padding: 20px;
}

.message .title h3 {
  font-size: 24px;
  text-align: center;
}

.payment {
  padding: 20px;
}

.payment h3 {
  font-size: 20px;
  text-align: center;
}

.payment .btn div {
  background-color: #601287;
  color: white;
  padding: 12px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}

/* 图片轮播 */
.slideshow {
  position: relative;
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.bakc {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  padding: 5px;
  cursor: pointer;
}

.my-swipe img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 酒店房间详情 */
.roomDetails {
  background-color: #fff;
  padding: 20px;
  margin: 0 10px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 房间信息 */
.roomInfo {
  margin-bottom: 20px;
}

.roomInfo .title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.topInfo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.infoItem {
  background-color: #f9f9f9;
  padding: 6px;
  border-radius: 8px;
  text-align: center;
  flex: 1 1 22%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.infoItem p {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

.infoItem span {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

/* 房间设施 */
.facility {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.facilityItem {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 10px;
  background-color: #fafafa;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin-right: 10px;
}

.facilityItem img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.facilityItem p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.facilityItem span {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

/* 入住政策 */
.policy {
  margin-bottom: 20px;
}

.policy h3 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.policy p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* 基础设施 */
.basics {
  margin-bottom: 20px;
}

.basics h3 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.facilitiesList {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.item {
  text-align: center;
  flex: 1 1 30%;
  padding: 10px;
  background-color: #fafafa;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.item .imgContainer {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item img {
  max-width: 40px;
  max-height: 40px;
}

.item p {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}


.message {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
}

.message .title h3 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

/* 时间选择部分样式 */
.time {
  margin-bottom: 16px;
  background-color: #f9f9f9;
  /* 柔和的背景色 */
  border-radius: 10px;
  /* 圆角边框 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 添加阴影 */
  display: flex;
  /* 使用 flex 布局 */
  align-items: center;
  /* 垂直居中 */
  padding-left: 10px;
  /* 给左边线留空间 */
  position: relative;
  /* 方便定位左侧蓝线 */
}

.time::before {
  content: "";
  /* 左边竖线的装饰 */
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  background-color: #007bff;
  /* 蓝色 */
  border-radius: 2px;
  /* 圆角，让线更柔和 */
}

.time .van-cell {
  flex: 1;
  /* 占据剩余空间 */
  padding: 8px 22px;
  /* 内边距，提升触控感 */
  background-color: #ffffff;
  /* 单独的白色背景 */
  border-radius: 8px;
  /* 子项圆角 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* 子项阴影 */
  font-size: 14px;
  /* 优化字体大小 */
  color: #333;
  /* 调整字体颜色 */
  display: flex;
  align-items: center;
  /* 内容垂直居中 */
}

.time .van-icon {
  margin-left: 10px;
  /* 给图标一些间距 */
  color: #007bff;
  /* 图标颜色与竖线一致 */
}


.van-button {
  background-color: #601287;
  color: #fff;
  border-radius: 8px;
  width: 100%;
  padding: 12px;
  font-size: 16px;
  font-weight: bold;
}

.van-button:hover {
  background-color: #501177;
}

.payment {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  /* 浅灰阴影增加质感 */
}


/* 金额显示区域样式 */
.payment div {
  font-size: 10px;
  color: #601287;
  /* 品牌主色调紫色 */
  margin: 20px 0;
  text-align: center;
  border-radius: 8px;
  /* 柔和圆角 */
}

.payment .btn {
  display: flex;
  justify-content: space-between;
}
</style>